1 The Basics - Meteoric Demos

Meteoric comes with a set of default "writers" (JavaScript functions which understand how to output HTML to the DOM) for common primitive types such as "string", "integer", "decimal", "url".

Using the "businessObject" writer

There is a built in writer for the type "businessObject". This writer looks for a "fields" property, which is an array of entities and writes these out (based on the "type" property of each field in the array).

// Build a simple businessObject
var simpleBusinessObject = {
    // Every entity must have a "type" property. 
    // This is used to identify the "writer" that will be used to render this object.
    "type": "businessObject",
    "fields": [{
       "type": "string",                // This will use the "string" writer
        "value": "Hello, World!",
        "displayName": "Greeting:"      // The string writer also supports editing. 
                                        // "displayName" lets you set the prompt for
                                        // the text field when editing (see below).
	}]
};

$("#helloWorldShow").meteoric({ entity: simpleBusinessObject });

Reusing a metadata entity for different purposes

Writers get given a "context" as well as the entity they are to write. The context.mode property identifies either "create", "read" (read is the default, if "mode" doesn't have a value), "update" or "delete":

In "read" mode, the writer should just display the properties of the entity.
In "create" mode, the writer should display an appropriate control (for example, a text box) for each property. If the values for each property are not empty, the create screen should be pre-populated with the values of the properties.
The "update" mode should behave as the "create" does.
The "delete" mode should behave the same as "read".

$("#helloWorldCreate").meteoric({ entity: simpleBusinessObject, mode: "create" });

$("#helloWorldUpdate").meteoric({ entity: simpleBusinessObject, mode: "update" });

$("#helloWorldDelete").meteoric({ entity: simpleBusinessObject, mode: "delete" });

The "businessObject" writer also understands the "context.mode" property, and tries to build an appropriate form around the fields it renders, as you can see from the displays above.